import React, { memo, useEffect, useState } from "react";
import sty from "./sty.module.css";
import { reqSearch } from "@/api/search";
import PropTypes from "prop-types";
import { Tabs } from "antd-mobile";
import { formatNum } from "@/utils";
import dayjs from "dayjs";
import Scroll from "@/components/scroll";
import { tabs } from "@/constans";
import { useHistory } from "react-router";
import { useDispatch } from "react-redux";
import { getCurSong } from "../../../../store/actionCreator";
const ResTabs = ({ keywords }) => {
  const [page, setPage] = useState(0);
  const [songs, setSongs] = useState([]);
  const [albums, setAlbums] = useState([]);
  const [artists, setArtists] = useState([]);
  const [playlists, setPlaylists] = useState([]);
  const history = useHistory();
  const dispatch = useDispatch();
  useEffect(() => {
    if (keywords.length) {
      setSongs([]);
      setAlbums([]);
      setPlaylists([]);
      setArtists([]);
      getResult(keywords);
    }
  }, [keywords]);

  const getResult = async (keywords, type = 1) => {
    const res = await reqSearch(keywords, type);
    if (res.code !== 200) {
      return;
    }
    const { result } = res;
    switch (type) {
      case 1:
        setSongs(result.songs);
        break;
      case 10:
        setAlbums(result.albums);
        break;
      case 100:
        setArtists(result.artists);
        break;
      case 1000:
        setPlaylists(result.playlists);
        break;
      default:
        break;
    }
  };
  const NoResult = () => (
    <div className={sty.noResult}>
      <div>
        <i
          className="iconfont icon-wukong"
          style={{ fontSize: 20, marginBottom: 10 }}
        ></i>
        <p>暂时无结果</p>
      </div>
    </div>
  );
  const handleTabClick = (tab, page) => {
    console.log(tab, page);
    setPage(page);
    switch (tab.type) {
      case 1:
        if (songs.length) {
          return;
        }
        break;
      case 10:
        if (albums.length) {
          return;
        }
        break;
      case 100:
        if (artists.length) {
          return;
        }
        break;
      case 1000:
        if (playlists.length) {
          return;
        }
        break;
      default:
        break;
    }

    getResult(keywords, tab.type);
  };
  const addSong = (id) => {
    dispatch(getCurSong(id));
  };
  const goTo = (path, id) => {
    history.push(`/${path}/${id}`);
  };
  return (
    <div className={sty.root}>
      <Tabs
        swipeable={false}
        tabs={tabs}
        page={page}
        onTabClick={handleTabClick}
      >
        <Scroll>
          {songs.length ? (
            <ul className={sty.songs}>
              {songs.map((v) => (
                <li key={v.id} onClick={() => addSong(v.id)}>
                  <div className={sty.left}>
                    <div className={sty.name}>{v.name}</div>
                    <div className={sty.info}>
                      {v.artists &&
                        v.artists.reduce((init, item, i) => {
                          if (i < v.artists.length - 1) {
                            init += item.name + "/";
                          } else {
                            init += item.name + "-";
                          }
                          return init;
                        }, "")}
                      {v.album && v.album.name}
                    </div>
                  </div>
                  <i className="iconfont icon-erji1"></i>
                </li>
              ))}
            </ul>
          ) : (
            <NoResult />
          )}
        </Scroll>
        <Scroll>
          {albums.length ? (
            <ul className={sty.albums}>
              {albums.map((v) => (
                <li key={v.id} onClick={() => goTo("album", v.id)}>
                  <img src={v.picUrl} alt="" />
                  <div>
                    <div className={sty.name}>{v.name}</div>
                    <div className={sty.info}>
                      {v.artists &&
                        v.artists.reduce((init, item, i) => {
                          if (i < v.artists.length - 1) {
                            init += item.name + "/";
                          } else {
                            init += item.name + "-";
                          }
                          return init;
                        }, "")}
                      {v.album && v.album.name} {v.size}首
                      {dayjs(v.publishTime).format("YYYY-MM-DD")}
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <NoResult />
          )}
        </Scroll>
        <Scroll>
          {artists.length ? (
            <ul className={sty.artists}>
              {artists.map((v) => (
                <li key={v.id} onClick={() => goTo("singer", v.id)}>
                  <img src={v.img1v1Url} alt="" />
                  <div className={sty.right}>
                    <div className={sty.name}>{v.name}</div>
                    <div className={sty.info}>
                      <span>专辑：{v.albumSize}</span>
                      <span>Mv：{v.mvSize}</span>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <NoResult />
          )}
        </Scroll>
        <Scroll>
          {playlists.length ? (
            <ul className={sty.playlists}>
              {playlists.map((v) => (
                <li key={v.id} onClick={() => goTo("sheet", v.id)}>
                  <img src={v.coverImgUrl} alt="" />
                  <div className={sty.right}>
                    <div className={sty.name}>{v.name}</div>
                    <div className={sty.info}>
                      {v.trackCount}首-{v.creator.nickname}播放
                      {formatNum(v.playCount)}
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <NoResult />
          )}
        </Scroll>
      </Tabs>
    </div>
  );
};
ResTabs.propTypes = {
  keywords: PropTypes.string,
};
ResTabs.defaultProps = {
  keywords: "",
};
export default memo(ResTabs);
